第三章、我是愛與正義的水少服戰士，要代替視差滾動懲♥︎罰♥︎你

第 12 屆 iThome 鐵人賽

DAY 4

Modern Web

網頁阿尼尛，到底是在幹尛？系列第 4 篇

12th鐵人賽好想工作室

CathyShen

團隊好想工作室 v4.0

2020-09-19 10:58:14

3221 瀏覽

分享至

前言

網頁動畫起手式不難，透過一些視覺暫留、前後景的切換，就可以做出最簡的單(偽)動畫效果。。

參考網站

像這樣的網站已經是近幾年網站設計趨勢，可以簡單的與使用者有互動，也不會過於複雜造成網頁負荷。

接下來的入門菜，就讓我們來試試看最簡單的一種視差滾動製作方式吧！

簡介

由於要利用到視覺暫留的特性，我們在這邊要介紹一種特別的 CSS 語法 background-attachment，他能決定圖片是否隨著 使用者裝置視窗(Viewport) 移動。

background-attachment: scroll, local; 效果

background-attachment 基礎語法

background-attachment: value, value;

名稱	說明
value	可調用屬性值

fixed

背景圖片相對 viewport 為固定效果。要注意的是，每一個 viewport 都只有一個視口，所以即便元素具有滾動的機制，元素的背景也會固定在原地不動。

local

背景相對元素為固定，若元素本身具有滾動功能，則背景也會隨著元素一起滾動，而 背景渲染區域 與 背景定位區域，則是相對於元素的可滾動區域，而不是外層框架的邊框，對於可滾動的元素，border-box value of background-clip。可被視為與 padding-box 相同。

scroll

背景相對於元素本身就是固定的，且並在元素本身滾動時，不會跟著元素滾動。

魔法變身

各位騷年騷女們，恭喜你們被天選為魔法少女(男)，現在，我將賦予你強大的力量，趕快跟我一起大聲喊出那句變身咒語吧！！

我們先將需要滾動的元素框架架好，並且讓內層元素絕對定位於外層元素。

<div class="outer">
  <div class="box image01"></div>
  <div class="box image02"></div>
  <div class="box image03"></div>
  <div class="box image04"></div>
  <div class="box image05"></div>
</div>

.outer {
  position: relative;
}
.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

接著我們來調整圖片位置、大小等視覺效果。由於我想要讓變身過程有個循環的感覺，所以在第一張跟第五張放了相同照片。

.image01 {
  height: 500px;
  background-image:   url("https://i.imgur.com/WtI10Zz.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

.image02 {
  height: 300px;
  margin-top: 30%;
  background-image:   url("https://i.imgur.com/jBiGrVW.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

.image03 {
  height: 300px;
  margin-top: 60%;
  background-image:   url("https://i.imgur.com/YP9gDCw.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

.image04 {
  height: 300px;
  margin-top: 90%;
  background-image:   url("https://i.imgur.com/V8eAerR.jpg");
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

.image05 {
  height: 300px;
  margin-top: 120%;
  background-image:   url("https://i.imgur.com/WtI10Zz.jpg");
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

將元素的 背景圖片 相對固定於 viewport 上，如此一來元素隨著視窗滾動的時候也不會隨著元素滾動，讓不同的背景圖片做到自然切換的效果。

.image01 {
  height: 500px;
  background-image: url("https://i.imgur.com/WtI10Zz.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}